<!DOCTYPE html>
<html>
  <head>
    <script src="../dist/jspsych.js"></script>
    <script src="../dist/plugin-categorize-image.js"></script>
    <script src="../dist/plugin-preload.js"></script>
    <link rel="stylesheet" href="../dist/jspsych.css">
    <style>
      img {
        width: 300px;
      }
    </style>
  </head>
  <body></body>
  <script>

    var jsPsych = initJsPsych({
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });

    var preload = {
      type: jsPsychPreload,
      auto_preload: true
    };

    var trials = {
      type: jsPsychCategorizeImage,
      stimulus: 'img/happy_face_1.jpg',
      key_answer: 'h',
      choices: ['h', 's'],
      text_answer: 'happy',
      correct_text: "<p>Correct. This face is %ANS%.</p>",
      incorrect_text: "<p>Incorrect. This face is %ANS%. Please press the correct key to continue.</p>",
      prompt: "<p>Press 'h' if the face is happy. Press 's' if the face is sad.</p>",
      trial_duration: 1500,
      show_feedback_on_timeout: false,
      force_correct_button_press: true
    };

    jsPsych.run([preload, trials]);

  </script>
</html>